<template>
  <div class="vip-card-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">💎 VIP卡管理</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleIssue">
              <el-icon><Plus /></el-icon>
              发放VIP卡
            </el-button>
            <el-button type="success" @click="handleBatchActivate">
              <el-icon><Select /></el-icon>
              批量激活
            </el-button>
          </div>
        </div>
      </template>

      <!-- 统计概览 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-label">VIP卡总数</div>
            <div class="stat-value">{{ totalCards }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card active">
            <div class="stat-label">已激活</div>
            <div class="stat-value">{{ activeCards }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-label">未激活</div>
            <div class="stat-value">{{ inactiveCards }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card expired">
            <div class="stat-label">已过期</div>
            <div class="stat-value">{{ expiredCards }}</div>
          </div>
        </el-col>
      </el-row>

      <!-- 搜索 -->
      <el-form :inline="true" class="search-form">
        <el-form-item label="卡号">
          <el-input v-model="searchForm.cardNo" placeholder="请输入卡号" clearable />
        </el-form-item>
        <el-form-item label="会员姓名">
          <el-input v-model="searchForm.memberName" placeholder="请输入会员姓名" clearable />
        </el-form-item>
        <el-form-item label="卡类型">
          <el-select v-model="searchForm.cardType" placeholder="请选择卡类型" clearable>
            <el-option label="银卡" value="silver" />
            <el-option label="金卡" value="gold" />
            <el-option label="钻石卡" value="diamond" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="未激活" value="inactive" />
            <el-option label="已激活" value="active" />
            <el-option label="已过期" value="expired" />
            <el-option label="已冻结" value="frozen" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- VIP卡列表 -->
      <el-table :data="tableData" border stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="cardNo" label="卡号" width="150" />
        <el-table-column prop="cardType" label="卡类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getCardTypeTag(row.cardType)">
              {{ getCardTypeName(row.cardType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="discount" label="折扣" width="100">
          <template #default="{ row }">
            <el-tag type="danger">{{ (row.discount * 10).toFixed(1) }}折</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="issueDate" label="发放日期" width="120" />
        <el-table-column prop="activeDate" label="激活日期" width="120" />
        <el-table-column prop="expireDate" label="有效期至" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="{ row }">
            <el-button 
              v-if="row.status === 'inactive'" 
              link 
              type="success" 
              @click="handleActivate(row)"
            >
              激活
            </el-button>
            <el-button link type="primary" @click="handleView(row)">详情</el-button>
            <el-button link type="warning" @click="handleRenew(row)">续期</el-button>
            <el-button link type="info" @click="handlePrint(row)">打印</el-button>
            <el-button link type="danger" @click="handleCancel(row)">注销</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSearch"
        @current-change="handleSearch"
      />
    </el-card>

    <!-- 发放VIP卡对话框 -->
    <el-dialog v-model="issueDialogVisible" title="发放VIP卡" width="600px">
      <el-form :model="issueForm" label-width="100px">
        <el-form-item label="选择会员">
          <el-select v-model="issueForm.memberId" filterable placeholder="请选择会员">
            <el-option label="张三 (13800138001)" value="M10001" />
            <el-option label="李四 (13800138002)" value="M10002" />
          </el-select>
        </el-form-item>
        <el-form-item label="卡类型">
          <el-select v-model="issueForm.cardType">
            <el-option label="银卡" value="silver" />
            <el-option label="金卡" value="gold" />
            <el-option label="钻石卡" value="diamond" />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期">
          <el-select v-model="issueForm.validPeriod">
            <el-option label="1年" :value="1" />
            <el-option label="2年" :value="2" />
            <el-option label="3年" :value="3" />
            <el-option label="永久" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否激活">
          <el-switch v-model="issueForm.autoActivate" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="issueDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleIssueSubmit">确认发放</el-button>
      </template>
    </el-dialog>

    <!-- 续期对话框 -->
    <el-dialog v-model="renewDialogVisible" title="VIP卡续期" width="500px">
      <el-form :model="renewForm" label-width="100px">
        <el-form-item label="卡号">
          <el-input :value="currentCard?.cardNo" disabled />
        </el-form-item>
        <el-form-item label="当前有效期">
          <el-input :value="currentCard?.expireDate" disabled />
        </el-form-item>
        <el-form-item label="续期时长">
          <el-select v-model="renewForm.period">
            <el-option label="1年" :value="1" />
            <el-option label="2年" :value="2" />
            <el-option label="3年" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="续期费用">
          <el-input-number v-model="renewForm.fee" :min="0" :precision="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="renewDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleRenewSubmit">确认续期</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Select } from '@element-plus/icons-vue'

const searchForm = reactive({
  cardNo: '',
  memberName: '',
  cardType: '',
  status: ''
})

const totalCards = ref(3456)
const activeCards = ref(2890)
const inactiveCards = ref(456)
const expiredCards = ref(110)

const tableData = ref([
  {
    cardNo: 'VIP001', cardType: 'diamond', memberName: '张三', phone: '13800138001',
    discount: 0.85, issueDate: '2023-01-15', activeDate: '2023-01-15', 
    expireDate: '2025-01-15', status: 'active'
  },
  {
    cardNo: 'VIP002', cardType: 'gold', memberName: '李四', phone: '13800138002',
    discount: 0.90, issueDate: '2023-03-20', activeDate: '2023-03-20', 
    expireDate: '2025-03-20', status: 'active'
  },
  {
    cardNo: 'VIP003', cardType: 'silver', memberName: '王五', phone: '13800138003',
    discount: 0.95, issueDate: '2023-06-10', activeDate: '', 
    expireDate: '2025-06-10', status: 'inactive'
  }
])

const pagination = reactive({ page: 1, size: 10, total: 3 })

const issueDialogVisible = ref(false)
const renewDialogVisible = ref(false)
const currentCard = ref(null)

const issueForm = reactive({
  memberId: '',
  cardType: 'silver',
  validPeriod: 1,
  autoActivate: true
})

const renewForm = reactive({
  period: 1,
  fee: 0
})

const getCardTypeTag = (type) => {
  const map = { silver: '', gold: 'warning', diamond: 'danger' }
  return map[type] || 'info'
}

const getCardTypeName = (type) => {
  const map = { silver: '银卡', gold: '金卡', diamond: '钻石卡' }
  return map[type] || type
}

const getStatusTag = (status) => {
  const map = { inactive: 'info', active: 'success', expired: 'warning', frozen: 'danger' }
  return map[status] || 'info'
}

const getStatusText = (status) => {
  const map = { inactive: '未激活', active: '已激活', expired: '已过期', frozen: '已冻结' }
  return map[status] || status
}

const handleSearch = () => {
  ElMessage.success('查询成功')
}

const handleReset = () => {
  Object.assign(searchForm, { cardNo: '', memberName: '', cardType: '', status: '' })
}

const handleIssue = () => {
  issueDialogVisible.value = true
}

const handleIssueSubmit = () => {
  ElMessage.success('VIP卡发放成功')
  issueDialogVisible.value = false
}

const handleActivate = (row) => {
  ElMessage.success('VIP卡激活成功')
  row.status = 'active'
  row.activeDate = new Date().toLocaleDateString()
}

const handleView = (row) => {
  ElMessage.info('查看VIP卡详情')
}

const handleRenew = (row) => {
  currentCard.value = row
  renewDialogVisible.value = true
}

const handleRenewSubmit = () => {
  ElMessage.success('续期成功')
  renewDialogVisible.value = false
}

const handlePrint = (row) => {
  ElMessage.success(`正在打印VIP卡: ${row.cardNo}`)
}

const handleCancel = (row) => {
  ElMessageBox.confirm(`确定要注销VIP卡 "${row.cardNo}" 吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('注销成功')
  })
}

const handleBatchActivate = () => {
  ElMessage.success('批量激活成功')
}
</script>

<style scoped>
.vip-card-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.stat-card.active {
  border-left: 4px solid #67c23a;
}

.stat-card.expired {
  border-left: 4px solid #f56c6c;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.search-form {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>

